<template>
    <div>
      <n-card :bordered="false" title="环境设置">
        <template #header-extra>
         <n-button type="primary" :loading="saveLoading" @click="saveSystemOption">保存设置</n-button>
        </template>
        <n-grid>
          <n-grid-item :span="12">
            <n-form
                label-placement="left"
                :style="{
                  maxWidth: '600px'
                }"
                :label-width="120"
                require-mark-placement="right-hanging"
                v-model = "systemParamForm"
            >
              <n-divider title-placement="left">剪映、C站代理设置</n-divider>
              <n-form-item v-if="systemParamForm.localModel.useMode==='local'" label="剪映草稿目录">
                <n-input v-model:value="systemParamForm.localModel.jyDraftPath">
                </n-input>
              </n-form-item>
              <n-form-item label="C站代理设置">
                <n-input v-model:value="systemParamForm.cStationProxy.cStationProxy"></n-input>
              </n-form-item>
              <n-divider title-placement="left">语音转文本设置</n-divider>
              <n-form-item label="适配器">
                <n-select :options="adapterOptions" v-model:value="systemParamForm.videoToText.modelAdapter"></n-select>
              </n-form-item>
<!--              <n-form-item label="模型位置">-->
<!--                <n-input v-model:value="systemParamForm.videoToText.modelPath"></n-input>-->
<!--              </n-form-item>-->
              <n-divider title-placement="left">翻译设置</n-divider>
              <n-form-item label="翻译类型">
                <n-select :options="translateWayOptions" v-model:value="baiduTranslateInfo.translateWay"></n-select>
              </n-form-item>
              <n-form-item label="appId" v-if="baiduTranslateInfo.translateWay==='BAIDU'">
                <n-input v-model:value="baiduTranslateInfo.appId"></n-input>
              </n-form-item>
              <n-form-item label="appSecret" v-if="baiduTranslateInfo.translateWay==='BAIDU'">
                <n-input v-model:value="baiduTranslateInfo.appSecret"></n-input>
              </n-form-item>
              <n-divider title-placement="left">反推模型</n-divider>
              <n-form-item label="反推模型">
                <n-select :options = "wd14taggerStatus" v-model:value="systemParamForm.localModel.taggerModel"></n-select>
              </n-form-item>
            </n-form>
          </n-grid-item>

          <n-grid-item :span="12">
            <n-form
              label-placement="left"
              :style="{
                maxWidth: '600px'
              }"
              :label-width="120"
              require-mark-placement="right-hanging"
              v-model = "systemParamForm">
              <n-divider title-placement="left">大语言模型设置</n-divider>

              <n-form-item label="大模型设置">
                  <n-select :options="llmOptions" v-model:value="lLMInfo.type" @update:value="llmSelected"></n-select>
              </n-form-item>

              <n-form-item label="提示" v-if="lLMInfo && lLMInfo.type=='localLLM'">
                <n-alert type="info">
                  <n-li>本地大模型需要有N卡支持, 6G显存以下请使用1.5b模型</n-li>
                  <n-li>由于本地大模型过于消耗资源,设置为手动开启关闭</n-li>
                  <n-li>点击右上角插件按钮，开启或者关闭本地大模型</n-li>
                </n-alert>
              </n-form-item>

              <n-form-item label="接口地址" v-if="lLMInfo && lLMInfo.type!='localLLM'">
                  <n-input v-model:value="lLMInfo.apiPath" ></n-input>
              </n-form-item>
                <n-form-item label="API KEY"  v-if="lLMInfo && lLMInfo.type!='localLLM'">
                    <n-input  v-model:value="lLMInfo.apiKey"></n-input>
                </n-form-item>
                <n-form-item label="模型选择" v-if="lLMInfo && lLMInfo.type==='KimiAI'">
                    <n-select :options="kimiModelOption" v-model:value="lLMInfo.modelName"></n-select>
                </n-form-item>

                <n-form-item label="模型选择" v-if="lLMInfo && lLMInfo.type==='ChatGPT'">
                  <n-select :options="modelOptions" v-model:value="lLMInfo.modelName"></n-select>
                </n-form-item>

                <n-form-item label="推理设备" v-if="lLMInfo && lLMInfo.type==='localLLM'">
                  <n-select :options="calOptions" v-model:value="lLMInfo.apiPath"></n-select>
                </n-form-item>
                <n-form-item label="模型选择" v-if="lLMInfo && lLMInfo.type==='localLLM'">
                  <n-select :options="localModelOptions" v-model:value="lLMInfo.modelName"></n-select>
                </n-form-item>

<!--                <n-button @click="startLocalLLM">启动LocalLLM服务</n-button>-->

              <n-form-item  :show-label="false"  v-if="lLMInfo && lLMInfo.type!='localLLM'">
                    <n-row>
                       <n-col :span="12">
                         <n-form-item label="代理IP">
                           <n-input placeholder="127.0.0.1" v-model:value="lLMInfo.proxyIp">
                           </n-input>
                         </n-form-item>
                       </n-col>
                        <n-col :span="12">
                            <n-form-item label="代理端口">
                                <n-input placeholder="7890" v-model:value="lLMInfo.proxyPort"></n-input>
                            </n-form-item>
                        </n-col>
                    </n-row>
                </n-form-item>
                <n-divider title-placement="left">微软TTS</n-divider>
                <n-form-item label="区域">
                  <n-input v-model:value="azureTTS.speechRegion"></n-input>
                </n-form-item>
                <n-form-item label="key">
                  <n-input v-model:value="azureTTS.speechKey"></n-input>
                </n-form-item>

                <n-divider title-placement="left">敏感词</n-divider>

                <n-form-item label="MJ敏感词">
                  <n-input   v-model:value="systemParamForm.bdword.mjBdWord" style="height: 400px" type="textarea"></n-input>
                </n-form-item>
            </n-form>
          </n-grid-item>

        </n-grid>
      </n-card>
    </div>
</template>

<script lang="ts" setup>

import {onMounted, ref} from "vue";
import {whisperController} from "@/api/controller/media/whisperController";
import {sysParamController} from "@/api/controller/sysParamController";
import {mediaController} from "@/api/controller/media/mediaController";
import {resourceController} from "@/api/resource/resourceController.api";
import {localLLMApi} from "@/api/chat/localLLMController.api";
import {pluginControllerApi} from "@/api/controller/pluginController.api";

// 转语音适配器
const videoToTextOption = ref([
  {
    label: '本地',
    value: 'local'
  }
])
const adapterOptions = ref([])

const useModeOption = [
  {
    label: '本地模式',
    value: 'local'
  },
  {
    label: '云服务模式',
    value: 'server'
  }
]

const wd14taggerStatus = ref([
  {
    label: '本地反推模型',
    value: 'local'
  },
  {
    label: '资源反推模型',
    value: 'remote'
  }

])

const systemParamForm = ref({
  localModel:{
    useMode: 'local',
    sdRootPath: '',
    jyDraftPath: '',
    taggerModel: ''
  },
  lux: {
    proxy: '',
    bilibiliCookie: ''
  },
  videoToText:{
    type: '',
    modelPath: '',
    modelAdapter: '',
    coreSize:0,
    queueSize:0,
    timeOut:0
  },
  mediaDownload: {
    proxy: '',
    bilibiliCookie: ''
  },
  cStationProxy: {
    cStationProxy: ''
  },
  bdword:{
    mjBdWord: ''
  }
})

const saveLoading = ref(false)


const getAdapter = () => {
  whisperController.getAdapter().then((res) => {
    if (res.code === 200) {
      res.data.forEach((item: any) => {
        // @ts-ignore
        adapterOptions.value.push({
          label: item,
          value: item
        })
      })
    }
  })
}


const getSystemParam = () => {
  sysParamController.getAllParam().then((res) => {
    if (res.code === 200) {
      systemParamForm.value = res.data
    }
  })
}

/**
 * 保存系统参数
 */
const saveSystemOption = () =>{
  saveLoading.value = true
  sysParamController.saveSystemOption(systemParamForm.value).then((res) => {
    if (res.code === 200) {
      window.$message.success('保存成功')
    }
  }).finally(()=>{
    saveLoading.value = false
  })
  saveLlmInfo()
  saveTranslateInfo()
  saveAzureTTS()
}


const lLMInfo = ref({
    type: '',
    apiPath: '',
    model: '',
    apiKey: '',
    modelName: '',
    proxyIp: '',
    proxyPort: ''
})

const translateWayOptions =  ref([
  {
    label: '本地翻译',
    value: 'LOCAL'
  },{
    label:'百度翻译',
    value:'BAIDU'
  },{
    label: '大语言模型翻译',
    value: 'GPT'
  }
])

const baiduTranslateInfo = ref({
    appId: '',
    appSecret: '',
    translateWay: ''
})

const azureTTS = ref({
  speechRegion: '',
  speechKey: ''
})

const badWord = ref('')


const getLLMInfo = () => {
   resourceController.getLLMInfo().then((res) => {
       if(res.code === 200){
         if (res.data){
           lLMInfo.value = res.data
         }
       }
   })
}

const saveLlmInfo = () =>{
    resourceController.saveLlmInfo(lLMInfo.value).then((res) => {
        if(res.code === 200){
            window.$message.success('保存成功')
        }
    })
}

const saveAzureTTS = () =>{
  resourceController.saveAzureTTS(azureTTS.value).then((res) => {
    if(res.code === 200){
      window.$message.success('保存成功')
    }
  })
}

const getTranslateInfo =()=>{
    resourceController.getTranslateInfo().then((res) => {
        if(res.code === 200){
            if (res.data){
                baiduTranslateInfo.value = res.data
            }
        }
    })
}


const getAzureTTS =()=>{
  resourceController.getAzureTTS().then((res) => {
    if(res.code === 200){
      if (res.data){
        azureTTS.value = res.data
      }
    }
  })
}

const saveTranslateInfo =()=>{
    resourceController.saveTranslateInfo(baiduTranslateInfo.value).then((res) => {
        if(res.code === 200){
            window.$message.success('保存成功')
        }
    })
}

const getBdWord = () =>{
  resourceController.getBdWord().then((res) => {
    if(res.code === 200){
      badWord.value = res.data
    }
  })
}

onMounted(() => {
  getAdapter()
  getSystemParam()
  getLLMInfo()
  getTranslateInfo()
  getAzureTTS()
  getLocalModelName()
})

const llmOptions = ref([
    {
        label: 'ChatGPT',
        value: 'ChatGPT'
    },
    {
        label: 'KimiAI',
        value: 'KimiAI'
    },
    {
      label: '本地大模型',
      value: 'localLLM'
    }
])

const kimiModelOption = ref([
    {
        label: 'moonshot-v1-8k',
        value: 'moonshot-v1-8k'
    },
    {
        label: 'moonshot-v1-32k',
        value: 'moonshot-v1-32k'
    },
    {
        label: 'moonshot-v1-128k',
        value: 'moonshot-v1-128k'
    }
])

const modelOptions = [
  {
    label: 'gpt-3.5-turbo',
    value: 'gpt-3.5-turbo'
  },
  {
    label: 'gpt-3.5-turbo-16k',
    value: 'gpt-3.5-turbo-16k'
  }
]



const localModelOptions = ref([
])

const calOptions = [
  {
    label: 'GPU推理',
    value: 'GPU'
  },
]

const llmSelected = (value:any) =>{
  if (value ==='KimiAI'){
    lLMInfo.value.modelName = 'moonshot-v1-8k'
    lLMInfo.value.apiPath = 'https://api.moonshot.cn'
  }
  if (value ==='ChatGPT'){
    lLMInfo.value.modelName = 'gpt-3.5-turbo'
    lLMInfo.value.apiPath = 'https://api.openai.com'
  }
  if (value === 'localLLM'){
    lLMInfo.value.modelName = ''
    lLMInfo.value.apiPath = 'GPU'
  }
}


const getLocalModelName =() =>{
  pluginControllerApi.getLocalModelName().then((res) => {
    if (res.code === 200){
      res.data.forEach((item:any) => {
        localModelOptions.value.push({
          label: item,
          value: item
        })
      })
    }
  })
}

const startLocalLLM = () =>{
  localLLMApi.startLLM().then((res) => {
    if (res.code === 200){
      window.$message.success('启动成功')
    }
  })
}
</script>
